0
185
ViewsUsando javaScript puro sin "onMount" en el marco Sveltekit
¿Hay alguna manera de usar JavaScript simple sin usar onMount ?
¿Cómo mejorar este código y no usar onMount?
(Me gustaría calzar cada cuadro de contenido después de que el usuario se desplace)
<script> import { onMount } from 'svelte'; onMount(() => { const boxes = document.querySelectorAll('.content'); window.addEventListener('scroll', checkBoxes); checkBoxes(); function checkBoxes() { const triggerBottom = (window.innerHeight / 5) * 4; boxes.forEach((box) => { const boxTop = box.getBoundingClientRect().top; if (boxTop < triggerBottom) { box.classList.add('show'); } else { box.classList.remove('show'); } }); } }); </script>
·
Juan Pablo Isaza
2 answers
Answer question0
Suponiendo que sus cuadros de contenido se generen en una matriz, podría usar una combinación de bind:this y svelte:window
<script> let boxes = []; let content = []; function checkBoxes() { // use boxes here } </script> <svelte:window on:scroll={checkBoxes} /> {#each content as c, i} <div bind:this={boxes[i]}> .... </div> {/each}Alternativamente, busque acciones e IntersectionObservers
·
Juan Pablo Isaza
Report
0
Qué tal si -
document.addEventListener("DOMContentLoaded", function(){ // your code here will be executed on page ready/load });
·
Juan Pablo Isaza
Report
Answer question